<script src="../ExternalLibrary/vue.js"></script>
<!-- 侦听属性的目的：观察和响应VUe实例上的数据变动 -->

<!------------------------------- 01.侦听属性初体验 start-------------------------------->
<fieldset>
    <legend>01.侦听属性初体验</legend>
    <div id="listen">
        {{fullName}}
    </div>
    <script>
        var vm = new Vue({
            el:"#listen",
            data:{
                firstName:"Foo",
                lastName:"bar",
                fullName:"Foo Bar"
            },
            watch:{
                //watch()函数需要知道侦听Vue实例的哪个属性，故而函数名必须与属性名相同！！！
                //函数的参数由底层传入
                firstName:function(val){
                    this.fullName = val+this.lastName
                },
                lastName:function(val){
                    this.fullName = this.firstName+val
                }
            }
        });

        //侦听属性可以由计算属性替代,计算属性又可以由方法替代，故而可以用方法[取各自优点]
    </script>
</fieldset>
<!------------------------------- 01.侦听属性初体验 end-------------------------------->


<!------------------------------- 02.侦听属性和钩子函数的结合使用 start-------------------------------->
<fieldset>
    <legend>02.侦听属性和钩子函数的结合使用</legend>
    <div>
        <p>
            Ask a yes/no question:
            <input v-model="question">
        </p>
        <p>{{answer}}</p>
    </div>
</fieldset>
<!------------------------------- 02.侦听属性和钩子函数的结合使用 end-------------------------------->



<!------------------------------- 03.监听属性的简写 start-------------------------------->
<fieldset>
    <legend>03.监听属性的再次使用</legend>
    <div id="listen2">
        <input type="text" v-model="Agreement">
    </div>
    <script>
        new Vue({
            el:"#listen2",
            data:{
                Agreement:""
            },
            watch:{
                //watch()函数需要知道侦听Vue实例的哪个属性，故而函数名必须与属性名相同！！！
                //函数简写方式
                Agreement(newVal,oldVal){//函数的参数由底层传入
                    console.log('Agreement变了,从'+oldVal+'变为'+newVal);//为什么使用${oldVal}不生效？因为没有使用反单引号
                }
            }
        })
    </script>
</fieldset>
<!------------------------------- 03.监听属性的简写 end-------------------------------->